<script type="text/ecmascript-6">
    /**
     * Created by wcz on 2016/10/20.
     */
    import b from '../bus'
    import moment from 'moment'

    export default{
        data () {
            return {
                searchField: '',
                isIndent: false,
                timeNow: '',
                tasksCount: 0,
                traceCount: 0,
                withdrawCount: 0,
                traceActCount: 0,
                creditorCount: 0
            }
        },
        computed: {},
        methods: {
            changeSystem (val) {
                this.system = val;
            },
            logout () {
                this.jax('/logout', {}, {errmsg: '登出失败'})
                    .then(res => {
                        if (res.success) {
                            this.$router.push('/login')
                        }
                    })
            },
            startTimer () {
                setInterval(() => {
                    this.timeNow = moment().format('HH:mm:ss ');
                }, 1000);

            },
            getCount () {
                this.get('/api/v1/tasks/count?state=1,2,3,4,7,8').then(res => {
                    if (res.success) {
                        this.tasksCount = res.data.count
                    }
                });
                this.get('/api/v1/traces/count?state=3&match=true').then(res => {
                    if (res.success) {
                        this.traceCount = res.data.count
                    }
                });
                this.get('/withdraw/count?state=2').then(res => {
                    if (res.success) {
                        this.withdrawCount = res.data.count
                    }
                });
                this.get('/api/v1/traces/count?state=3&is_activity=true').then(res => {
                    if (res.success) {
                        this.traceActCount = res.data.count
                    }
                });
                this.get('/api/v1/upstreams/count?state=2').then(res => {
                    if (res.success) {
                        this.creditorCount = res.data.count
                    }
                });
            }
        },
        created () {
            b.$on('barIndent', () => {
                this.isIndent = true;
            });
            b.$on('resCount', () => {
                this.getCount();
            });
            b.$on('barStretch', () => {
                this.isIndent = false;
            })
        },
        mounted () {
            this.startTimer();
            this.getCount();
            setInterval(() => {
                this.getCount();
            }, 5000)
        }
    }
</script>

<template>
    <div class="app" layout="row center-left">
        <nav class="app__side-bar" :class="{'indent': isIndent}" layout="column top-center">
            <div class="app__logo-box" layout="column top-center">
                <div class="app__logo-box-inner">
                    <img class="app__logo" src="/imgs/logo.png" alt="">
                </div>

            </div>
            <ul class="app__menu">
                <li class="app__menu-title">TASKS</li>
                <li class="app__menu-list">
                    <router-link class="app__menu-link" :to="'/home/tasks'">任务列表 ({{tasksCount}})</router-link>
                    <i class="iconfont">&#xe60c;</i>
                </li>
                <li class="app__menu-list">
                    <router-link class="app__menu-link" :to="'/home/comments'">线人情报列表 ({{traceCount}})</router-link>
                    <i class="iconfont">&#xe803;</i>
                </li>

                <li class="app__menu-list">
                    <router-link class="app__menu-link" :to="'/home/financial'">提现申请 ({{withdrawCount}})</router-link>
                    <i class="iconfont">&#xe612;</i>
                </li>
                <li class="app__menu-list">
                    <router-link class="app__menu-link" :to="'/home/activity'">活动 ({{traceActCount}})</router-link>
                    <i class="iconfont">&#xe61b;</i>
                </li>
            </ul>
            <div class="gap"></div>
            <ul class="app__menu">
                <li class="app__menu-title">REGISTER</li>
                <li class="app__menu-list">
                    <router-link class="app__menu-link" :to="'/home/creditor'">客户列表 ({{creditorCount}})</router-link>
                    <i class="iconfont">&#xe62e;</i>
                </li>
                <li class="app__menu-list">
                    <router-link class="app__menu-link" :to="'/home/informant'">线人列表</router-link>
                    <i class="iconfont">&#xe615;</i>
                </li>
                <li class="app__menu-list">
                    <router-link class="app__menu-link" :to="'/home/super-register'">发放账号</router-link>
                    <i class="iconfont">&#xe677;</i>
                </li>
            </ul>

            <div class="app__shutdown" @click="logout" layout="row center-center">
                <i class="iconfont">&#xe608;</i>
            </div>
        </nav>
        <section class="app__content">
            <header class="app__system-bar" layout="row center-right">
                <div class="app__time" layout="row center-center">
                    {{timeNow}}
                </div>
            </header>
            <keep-alive>
                <transition name="fade" mode="out-in">
                    <router-view></router-view>
                </transition>
            </keep-alive>

        </section>
    </div>

</template>